<template>
  <div id='mapId'>
    <el-amap vid="amapDemo" ref="Map" class="map" :plugin="plugin" :amap-manager="amapManager"
      :events="events" :center="center">
      <!-- <div v-for="item in deviceType" :key="item.icon"> -->
        <el-amap-marker :events="markerEvents" :clickable='true' :visible="markerFlag"
          vid="component-marker-1" :position="[ele.longitude,ele.latitude]"
          v-for="(ele,index) in icon" title="预警终端"
          :key="ele.deviceCode  + ele.deviceId + index">
          <template>
            <div data-name="wrgt" :class="['coordSvg','device', 'wrgt']">
              <svg-icon icon-class="wrgt" />
            </div>
          </template>
        </el-amap-marker>
      <!-- </div> -->
      <el-amap-marker :events="markerEvents" :clickable='true' :visible="maker"
        vid="component-marker-2" :position="[item.epiLon,item.epiLat]"
        v-for="(item,index) in warningIcon" :title="item.warningId ? '地震预警' : '地震速报'"
        :key="item.eqrId + index">
        <template>
          <div :data-name="item.warningId ? item.warningId + '地震预警': item.reportId + '地震速报'"
            :class="['logMarker', animations(item.magnitude)]">
            <div :style="`background-color: rgba(217, 54, 62, ${colorChange(item.oriTime)});`"
              :class="['coordSvg']">
              <!-- <svg-icon :icon-class="item.icon" /> -->
              {{item.magnitude | lv}}
            </div>
            <div v-if="new Date() - new Date(item.oriTime) < 172800000 && item.magnitude >= 3"
              class="dot"></div>
            <div v-if="new Date() - new Date(item.oriTime) < 172800000 && item.magnitude >= 3"
              class="dot1"></div>
          </div>
        </template>
      </el-amap-marker>
    </el-amap>
    <div v-if="dialog" :style="`top:${top}px;left:${left}px;`" class="makerLog">
      <div :class="[markerData.reportId ? 'report' : 'warning' ]">
        <div>预警</div>
        <div>{{markerData.magnitude}}</div>
      </div>
      <div>
        <div>
          <div>{{markerData.locName || markerData.regeocode.formattedAddress}}</div>
          <div>{{markerData.distance}}km</div>
        </div>
        <div>
          <span>纬度: {{markerData.epiLat}}</span>
          <span>经度: {{markerData.epiLon}}</span>
        </div>
        <div>{{markerData.oriTime}}</div>
      </div>
      <!-- <div>
        <div>111</div>
        <div>km</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { AMapManager } from 'vue-amap';
import {
  getDeviceSpot,
  getWarningLogSeven,
  getQuickReportLogSeven,
} from '@/api/api.js';

export default {
  name: 'mapBox',
  components: {},
  props: {
    deviceKey: {
      type: Number,
      default: 0,
    },
    maker: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    const selt = this;
    return {
      dialog: false,
      top: 0,
      left: 0,
      content: '预警终端',
      icon: {},
      warningIcon: [],
      center: [114.309317, 30.600008],
      plugin: [
        {
          pName: 'MapType',
          defaultType: 0, //0代表默认，1代表卫星
          showTraffic: false, // 路网
          showRoad: false, // 路况
        },
      ],
      mapStyleNorm: 'amap://styles/7c6fdd7f4f1e4d7238f565390bbf1c24',
      markerFlag: false,
      markerName: '',
      markerData: {},
      // Map: null,
      amapManager: new AMapManager(),
      events: {
        init: async (map) => {
          console.log(map);
          map.setMapStyle(this.mapStyleNorm);
          map.setZoom(13);
          // this.Map = map;
          // console.log(map);
          // console.log(map.getCenter());

          // this.$store.dispatch('app/setCity', map.getAdcode());
        },
        zoomchange: () => {
          let level = this.$refs.Map.$$getInstance().getZoom();
          console.log(level);
          if (level <= 9) {
            this.markerFlag = false;
          } else {
            this.markerFlag = true;
          }
        },
        hotspotclick: (type, lnglat, name, id) => {
          console.log(type, lnglat, name, id);
        },
        // mousedown: function () {
        //   console.log(arguments);
        // },
      },
      markerEvents: {
        click: function () {
          const key = arguments[0].originEvent.target.getAttribute('data-name');
          if (selt.markerName == key) {
            selt.markerName = '';
            selt.dialog = !selt.dialog;
            return;
          } else {
            selt.markerName = key;
          }
          if (key.indexOf('地震预警') !== -1) {
            selt.markerData = selt.warningIcon.filter((item) => {
              return item.warningId + '地震预警' == key;
            })[0];
            if (arguments[0].pixel.y > 300) {
              selt.top = arguments[0].pixel.y - 120;
            } else {
              selt.top = arguments[0].pixel.y + 20;
            }
            selt.left = arguments[0].pixel.x - 180;
            // if (arguments[0].pixel.x > 1200) {
            //   selt.left = arguments[0].pixel.x - 140;
            // } else {
            //   selt.left = arguments[0].pixel.x - 140;
            // }
            selt.dialog = true;
          } else {
            selt.markerData = selt.warningIcon.filter((item) => {
              return item.reportId + '地震速报' == key;
            })[0];
            if (arguments[0].pixel.y > 300) {
              selt.top = arguments[0].pixel.y - 120;
            } else {
              selt.top = arguments[0].pixel.y + 20;
            }
            selt.left = arguments[0].pixel.x - 180;
            // if (arguments[0].pixel.x > 1200) {
            //   selt.left = arguments[0].pixel.x - 375;
            // } else {
            //   selt.left = arguments[0].pixel.x;
            // }
            selt.dialog = true;
          }
          console.log(selt.markerData);
        },
      },
      deviceType: [
        {
          name: '预警终端',
          icon: 'wrgt',
          key: 3,
        },
      ],
      address: '114.309317,30.600008',
    };
  },
  filters: {
    lv: function (value) {
      let lv = 'Ⅰ';
      switch (value) {
        case 1:
          lv = 'Ⅰ';
          break;
        case 2:
          lv = 'Ⅱ';
          break;
        case 3:
          lv = 'Ⅲ';
          break;
        case 4:
          lv = 'Ⅳ';
          break;
        case 5:
          lv = 'Ⅴ';
          break;
        case 6:
          lv = 'Ⅵ';
          break;
        case 7:
          lv = 'Ⅶ';
          break;
        case 8:
          lv = 'Ⅷ';
          break;
        case 9:
          lv = 'Ⅸ';
          break;
        case 10:
          lv = 'Ⅹ';
          break;
        case 11:
          lv = 'Ⅺ';
          break;
        case 12:
          lv = 'ⅩⅡ';
          break;
        default:
          break;
      }
      return lv;
    },
  },
  computed: {},
  created() {
    // if (process.client){}
  },
  mounted() {
    this.$nextTick(async () => {
      axios
        .get(
          'https://restapi.amap.com/v3/ip?key=f230f3385212298fcbe2c0841da455fc'
        )
        .then(async (res) => {
          const loc = res.data.rectangle.split(';')[0];
          this.$store.dispatch('app/setLocation', loc);
          const res1 = await axios.get(
            `https://restapi.amap.com/v3/geocode/regeo?key=f230f3385212298fcbe2c0841da455fc&location=${loc}`
          );
          if (res1.status == 200) {
            this.address = res1.data.regeocode.addressComponent.adcode;
            this.$store.dispatch('app/setCity', this.address);
          }
        });
      console.log(document.querySelector('.amap-maptype-wrap'));
      // this.$refs.Map.$$getInstance().setCenter([114.309317, 30.600008]);
      // console.log(this.$refs.Map.$$getInstance().getAdcode());
      this.getDevice();
      this.getWarning();
      this.getQuick();
      console.log(this.warningIcon);
    });
  },
  beforeCreate() {},
  beforeMount() {},
  methods: {
    colorChange(value) {
      const time = new Date() - new Date(value);
      if (time <= 172800000) {
        return 0.3;
      } else if (time > 172800000 && time <= 172800000 * 2) {
        return 0.5;
      } else if (time <= 172800000 * 3 && time > 172800000 * 2) {
        return 0.75;
      } else if (time > 172800000 * 3) {
        return 1;
      }
    },
    animations(value) {
      if (value >= 5) {
        return 'animation3';
      } else if (value < 5 && value >= 4) {
        return 'animation2';
      } else if (value < 4 && value >= 3) {
        return 'animation1';
      }
    },
    mapChange(type) {
      let map = this.$refs.Map.$$getInstance();
      console.log(map);
      if (type == 'norm') {
        // map.
      }
    },
    async getDevice() {
      const res = await getDeviceSpot({
        statusList: [0, 1],
        deviceKey: this.deviceKey,
      });
      if (res.code == 200) {
        this.icon = res.data;
      }
    },
    async getWarning() {
      const res = await getWarningLogSeven({
        address: this.address,
        sysKey: 'zzyearthquakewarning',
      });
      if (res.code == 200) {
        console.log('Warning', res);
        this.warningIcon = this.warningIcon.concat(res.data);
      }
    },
    async getQuick() {
      const res = await getQuickReportLogSeven({
        address: this.address,
        sysKey: 'zzyearthquakewarning',
      });
      if (res.code == 200) {
        console.log('Quick', res);
        this.warningIcon = this.warningIcon.concat(res.data);
      }
    },
  },
};
</script>
<style lang='scss' scoped>
@keyframes warn {
  0% {
    transform: translateX(-17%) scale(0);
  }
  10% {
    transform: translateX(-17%) scale(0.1);
  }
  20% {
    transform: translateX(-17%) scale(0.2);
  }
  30% {
    transform: translateX(-17%) scale(0.3);
  }
  40% {
    transform: translateX(-17%) scale(0.4);
  }
  50% {
    transform: translateX(-17%) scale(0.5);
  }
  60% {
    transform: translateX(-17%) scale(0.6);
  }
  70% {
    transform: translateX(-17%) scale(0.7);
  }
  80% {
    transform: translateX(-17%) scale(0.8);
  }
  90% {
    transform: translateX(-17%) scale(0.9);
  }
  100% {
    transform: translateX(-17%) scale(1);
  }
}

@keyframes warn1 {
  0% {
    transform: translateX(-17%) scale(0.3);
  }
  10% {
    transform: translateX(-17%) scale(0.39);
  }
  20% {
    transform: translateX(-17%) scale(0.48);
  }
  30% {
    transform: translateX(-17%) scale(0.57);
  }
  40% {
    transform: translateX(-17%) scale(0.66);
  }
  50% {
    transform: translateX(-17%) scale(0.75);
  }
  60% {
    transform: translateX(-17%) scale(0.84);
  }
  70% {
    transform: translateX(-17%) scale(0.93);
  }
  80% {
    transform: translateX(-17%) scale(1.02);
  }
  90% {
    transform: translateX(-17%) scale(1.11);
  }
  100% {
    transform: translateX(-17%) scale(1.2);
  }
}

@keyframes warn2 {
  0% {
    transform: translateX(-17%) scale(0.4);
  }
  10% {
    transform: translateX(-17%) scale(0.51);
  }
  20% {
    transform: translateX(-17%) scale(0.62);
  }
  30% {
    transform: translateX(-17%) scale(0.73);
  }
  40% {
    transform: translateX(-17%) scale(0.84);
  }
  50% {
    transform: translateX(-17%) scale(0.95);
  }
  60% {
    transform: translateX(-17%) scale(1.06);
  }
  70% {
    transform: translateX(-17%) scale(1.17);
  }
  80% {
    transform: translateX(-17%) scale(1.28);
  }
  90% {
    transform: translateX(-17%) scale(1.39);
  }
  100% {
    transform: translateX(-17%) scale(1.5);
  }
}

@keyframes warn3 {
  0% {
    transform: translateX(-17%) scale(0.5);
  }
  10% {
    transform: translateX(-17%) scale(0.63);
  }
  20% {
    transform: translateX(-17%) scale(0.76);
  }
  30% {
    transform: translateX(-17%) scale(0.89);
  }
  40% {
    transform: translateX(-17%) scale(1.02);
  }
  50% {
    transform: translateX(-17%) scale(1.15);
  }
  60% {
    transform: translateX(-17%) scale(1.28);
  }
  70% {
    transform: translateX(-17%) scale(1.41);
  }
  80% {
    transform: translateX(-17%) scale(1.54);
  }
  90% {
    transform: translateX(-17%) scale(1.67);
  }
  100% {
    transform: translateX(-17%) scale(1.8);
  }
}

#mapId {
  width: 100%;
  height: 100%;
  position: relative;
}
.makerLog {
  position: absolute;
  display: flex;
  width: 360px;
  height: 100px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 20%);
  .report {
    > div {
      &:nth-child(1) {
        color: #fff;
        background: rgba(24, 144, 255, 0.7);
      }
      &:nth-child(2) {
        color: rgba(24, 144, 255, 0.7);
        border: 1px solid rgba(24, 144, 255, 0.7);
      }
    }
  }
  .warning {
    > div {
      &:nth-child(1) {
        color: #fff;
        background: rgb(255, 207, 64);
      }
      &:nth-child(2) {
        color: rgb(255, 207, 64);
        border: 1px solid rgb(255, 207, 64);
      }
    }
  }
  > div {
    padding: 10px;
    font-size: 14px;
    &:nth-child(1) {
      width: 70px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      // padding: 10px 0px;
      > div {
        width: 55px;
        height: 30px;
        line-height: 30px;
        border-radius: 4px;
        text-align: center;
      }
    }
    &:nth-child(2) {
      flex: 1;
      display: flex;
      flex-direction: column;
      > div {
        flex: 1;
        line-height: 26.67px;
        white-space: nowrap;
        &:nth-child(1) {
          display: flex;
          justify-content: space-between;
          > div {
            &:nth-child(1) {
              max-width: 200px;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
        &:nth-child(2) {
          > span {
            margin-right: 10px;
          }
        }
      }
      // background: green;
    }
    // &:nth-child(3) {
    //   width: 70px;
    //   height: 100%;
    //   display: flex;
    //   >div {
    //     &:nth-child(1) {
    //       flex: 1;
    //       overflow: hidden;
    //       text-overflow: ellipsis;
    //     }
    //     &:nth-child(2) {
    //       width: 22px;
    //     }
    //   }
    // }
  }
}
.title-log {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.7);
  > div {
    padding: 3px 10px;
    border-top: 1px solid rgba(0, 191, 143, 0.5);
    border-bottom: 1px solid rgba(0, 191, 143, 0.5);
    background: linear-gradient(
      rgba(0, 191, 143, 0.2) 0%,
      rgba(0, 191, 143, 0) 50%,
      rgba(0, 191, 143, 0.2) 100%
    );
  }
  > button {
    width: 22px;
    height: 22px;
    line-height: 10px;
    margin: auto 0;
  }
}
.coordSvg {
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  color: #fff;
  pointer-events: none;
  -webkit-mask: url('../../assets/images/coord.svg') no-repeat 50% 50%;
  mask: url('../../assets/images/coord.svg') no-repeat 50% 50%;
}
.device {
  background-color: rgba(24, 144, 255, 1);
}
.logMarker {
  position: relative;
  > .dot {
    position: absolute;
    width: 50px;
    height: 32px;
    top: 35%;
    left: 0%;
    transform: translateX(-17%);
    z-index: -1;
    border: 1px solid #d9363e;
    border-radius: 50%;
    background: #d9363e52;
    // animation: warn1 3s ease-out infinite;
  }
  > .dot1 {
    position: absolute;
    width: 50px;
    height: 32px;
    top: 35%;
    left: 0%;
    transform: translateX(-17%);
    z-index: -1;
    border: 1px solid #d9363e;
    border-radius: 50%;
    background: #d9363e52;
    // animation: warn 3s ease-out 0.5s infinite;
  }
}

.animation1 {
  > .dot {
    animation: warn1 3s ease-out infinite;
  }
  > .dot1 {
    animation: warn 3s ease-out 0.5s infinite;
  }
}

.animation2 {
  > .dot {
    animation: warn2 3s ease-out infinite;
  }
  > .dot1 {
    animation: warn1 3s ease-out 0.5s infinite;
  }
}

.animation3 {
  > .dot {
    animation: warn3 3s ease-out infinite;
  }
  > .dot1 {
    animation: warn2 3s ease-out 0.5s infinite;
  }
}

.icon_1 {
  width: 42px;
  height: 42px;
  background: red;
}
::v-deep .amap-logo {
  display: none;
  opacity: 0 !important;
}
::v-deep .amap-copyright {
  opacity: 0;
}
::v-deep .amap-maptype-list {
  opacity: 0;
}
</style>